<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1.0" />
<link rel="stylesheet" type="text/css" href="style/dialog.css">
</head> 
<body>

<div class="btn-container">
    <input type="button" id="success" value="成功" />
    <input type="button" id="error" value="错误" />
    <input type="button" id="load" value="正在加载" />
    <input type="button" id="tip" value="提示" />
</div>

</body>
</html>
<script src="javascript/zepto.min.js"></script>
<script type="text/javascript" src="javascript/dialog.min.js"></script>
<script type="text/javascript">
      // =============================================
      // @des:            
      // type:success成功 error错误 load加载中 tip提示信息
      // msg:内容
      // delay：显示时间
      // callBack(function):回调函数 
      // @author:         shaotianyu
      // @time:           2017-03-19
      // =============================================
      // 
      // 默认值
      // width:180, 动画容器的宽度 *宽度默认180px
      // height:150,  动画容器的高度 *宽度默认150px 
      // type:"success" 弹出动画类型 *默认为success
      // msg:'操作成功', 弹出的信息  *默认 ‘操作成功’
      // delay:0, 显示持续时间 *默认0
      // bg:true, 是否显示背景遮罩层 *默认有浅黑色背景遮罩
      // bgWhite:false, 背景是否为白色 *默认不是白色
      // clickDomCancel:false, 点击遮罩层，弹出效果立即消失 *默认false
      // callback:null, 执行完动画后的回调函数 *默认null
      
		               
        $('#success').click(function(){
           popup({type:'success',msg:"操作成功",delay:1000,callBack:function(){
              console.log('callBack~~~');
           }});
        })
        $('#error').click(function(){
           popup({type:'error',msg:"操作失败",delay:2000,bg:true,clickDomCancel:true});
        })
        $('#load').click(function(){
           popup({type:'load',msg:"请等待",delay:1500,callBack:function(){
              popup({type:"success",msg:"加载成功",delay:1000});
           }});
        })
        $('#tip').click(function(){
           popup({type:'tip',msg:"提示信息",delay:null});
        })
</script>